<template>
  <div class="container">
    <template v-show="!mode">
      <div class="catalogue" v-show="!mode"  v-loading="treeLoading">
        <RoleTree :treeData="treeData" @loadTree="getTreeData" @getRowData="getRowData"
                  @addRole="handleAddRole" @addRoleGroup="handleAddRoleGroup"></RoleTree>
      </div>
      <div class="table" v-loading="loading" v-show="!mode && selectRow.roleName">
        <div class="table-body" style="margin-top: 0">
          <div class="top-wrapper clearfix">
            <div class="left main-text" >{{selectRow.roleName || '选择左侧角色'}} （{{pagination.total}})</div>
            <div class="right">
              <el-button @click="handleEditRole" class="plain-btn edit-btn">
                <div style="display: flex;align-items: center;">
                  <span style="margin-right: 10px">编辑角色</span>
                  <img src="@/assets/img/icon-bjjs.png" alt="">
                </div>
              </el-button>
            </div>
          </div>
          <div class="clearfix" style="margin-bottom: 10px">
            <el-button size="small" class="green-btn" @click="handleAddUser">添加成员</el-button>
            <el-button size="small" class="default-btn" @click="handleDelBatch">批量删除</el-button>
          </div>
          <div class="text-permission">权限项</div>
          <div class="tag-list">
            <el-tag class="tag-item" v-for="item in tagList" :key="item.id">{{item.title}}</el-tag>
          </div>
          <el-table :data="tableData" :border="false" style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column prop="loginName" label="账号名称"></el-table-column>
            <el-table-column prop="userName" label="用户名"></el-table-column>
            <el-table-column prop="StrStatus" label="部门"></el-table-column>
            <el-table-column prop="enable" label="状态">
              <template slot-scope="scope">
                <span>{{scope.row.enable ? '正常' :'禁用'}}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="clearfix">
            <el-pagination
                style="text-align: center"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.pageIndex"
                :page-sizes="[10,20,30,40,50]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </template>

    <RoleForm
        ref="uniForm"
        :mode="mode"
        :userMenu="tagList"
        @back="back"
        v-show="mode"
    ></RoleForm>

    <RoleDrawer
        :visible.sync="visible"
        :mode="userMode"
        :selectRow="selectRow"
        @close="closeDrawer"
    ></RoleDrawer>

    <RoleGroupDrawer
        :visible.sync="roleGroupvisible"
        :mode="userMode"
        :selectRow="selectRow"
        @close="closeGroupDrawer"
    ></RoleGroupDrawer>
  </div>
</template>

<script>
import {sandbox} from "@/libs/util";
import table from '@/mixins/table'
import RoleTree from "./components/RoleTree";
import RoleForm from "./components/RoleForm";
import RoleDrawer from "./components/RoleDrawer";
import RoleGroupDrawer from "./components/RoleGroupDrawer";


export default {
  data() {
    return {
      mode:'',
      userMode:'',
      visible:false,
      roleGroupvisible:false,
      treeLoading:false,
      formField: sandbox({
        roleId: "",
      }),
      tableData: [],
      selecteds: [],
      treeData: [],
      tagList: [],
      selectRow:{},
      selectionData:[],
    };
  },
  components: {
    RoleGroupDrawer,
    RoleForm,
    RoleDrawer,
    RoleTree,
  },
  mixins: [table],
  methods: {
    LoadTableDataMethod() {
      return this.$api
          .api_urcap_roleManage_roleUserPage({
            param: Object.assign(this.formField, this.pagination)
          })
          .then(res => {
            this.tableData = res.data.records
            this.pagination.currentPage = res.data.current
            this.pagination.pageSize = res.data.size
            this.pagination.total = res.data.total
          })
    },
    back(reLoad){
      this.mode = ''
      if(reLoad){
        this.getTreeData()
        this.fetchData()
        this.getRoleMenu()
      }
    },
    closeGroupDrawer(reLoad){
      this.roleGroupvisible = false
      if(reLoad){
        this.getTreeData()
        this.fetchData()
      }
    },
    getRoleMenu(){
      if(this.selectRow.id){
        this.$api.api_urcap_auth_menu_build({
          param:{roleId:this.selectRow.id}
        }).then((res) => {
          this.tagList = res.data
        })
      }
    },
    getRowData(row) {
      this.formField.roleId = row.id
      this.selectRow = row
      this.getRoleMenu()
      this.fetchData()
    },
    // 获取树列表
    getTreeData() {
      this.treeLoading = true
      this.$api
          .api_urcap_roleManage_roleTree()
          .then((res) => {
            this.treeData = res.data;
          })
          .finally(() => {
            this.treeLoading = false;
          });
    },

    handleAddRole(){
      this.mode = 'add'
    },
    handleEditRole(){
      this.mode = 'edit'
      this.$refs.uniForm.SetData(this.selectRow)
    },
    handleAddRoleGroup(){
      this.roleGroupvisible = true
    },
    handleAddUser(){
      this.visible = true
      this.userMode = 'add'
    },
    handleSelectionChange(selection) {
      this.selectionData = selection;
    },
    handleDelBatch(){
      if (this.selectionData.length === 0) {
        this.$message({type: "error", message: "至少选择一条数据"});
        return;
      }
      const userIds = this.selectionData.map(ele => ele.id)
      this.$confirm('确认删除选中的数据？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$api
            .api_urcap_roleManage_deleteRoleUser({
              body: {
                roleId: this.selectRow.id,
                userIds: userIds,
              }
            }).then(() => {
              this.fetchData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
      })
    },
  },
  created() {
    this.getTreeData()
  },
};
</script>

<style lang="scss" scoped>
.container{
  display: flex;
}

.catalogue {
  box-sizing: border-box;
  position: relative;
  width: 340px;
  padding: 20px;
  margin: 15px 12px 12px 12px;
  max-height: calc(100% - 60px);
  background: rgba(255,255,255,0.502);
  border-radius: 8px 8px 8px 8px;
  border: 2px solid #FFFFFF;
  overflow: auto;
}

.catalogue-button {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  right: 0;
  top: 0;
  width: 10px;
  border-radius: 10px 0 0 10px;
  height: 100%;

  .icon-arrow {
    position: absolute;
    left: -5px;
    font-size: 20px;
    font-weight: bold;
    color: #888;

    &:hover {
      color: #036FAE;
    }
  }
}

.table {
  flex: 1;
}

.top-wrapper{
  padding: 0 24px 12px 24px;
  border-bottom: 1px solid #DCE1E4;
  margin-bottom: 20px;
  .main-text{
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
  }
  .edit-btn{
    display: flex;
    align-items: center;
    width: 170px;
    height: 72px;
    font-size: 14px;
    background: linear-gradient( 270deg, #FC9657 0%, #FC9657 0%, #FCA157 100%) !important;
    &:hover{
      background: #fd8337 !important;
    }
  }
}

.hover {
  font-size: 14px;
  color: #333;
}

.hover > div {
  padding: 10px;
  line-height: 15px;
}

.hover>div:hover {
  color: #b45f1a;
  background: #fff4e9;
}

.text-permission{
  font-size: 18px;
  color: #666666;
  margin: 20px 0 10px 0;
}
.tag-list{
  margin-bottom: 10px;
  .tag-item{
    color: #2774F4;
    margin-right: 20px;
    background: #ECF2FF;
    border-radius: 4px 4px 4px 4px;
    border: none;
  }
}
</style>
